<?php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<div class="tab"><!--tab -->
    <ul class="submenu">
        <li class="selected">新規作成 </li>
    </ul>
    <ul class="help">
        <li><a href="#"><?php echo $this->Html->image('help.png'); ?></a></li>
    </ul>
</div><!-- end tab -->
<div class="contain">
	<?php echo $this->Form->create('Todo', array('id' => 'TodoForm')); ?>
		<div class="contain-sub">
			<div id="message-box">
				<?php echo $this->Session->flash(); ?>
			</div>
			<input type="submit" value="新規登録" id="register-1">
			<div class="todoForm">
				<table>
					<tr>
						<td width="200px">タイトル<span style="color: red">※</span></td>
						<td>
							<?php echo $this->Form->input('title', array('label' => false,'error' => false, 'size' => '60')); ?>
						</td>
					</tr>
					<tr>
					<td>期限<span style="color: red">※</span></td>
					<td>
						<select name="data[Todo][end_date][year]" id="TodoEndDateYear">
						<?php
							$selectedYear = date('Y');
							for ($y = 2013; $y < 2017; $y++) :
								echo '<option value="'.$y.'" '.(($selectedYear == $y) ? 'selected="selected"' : '').'>'.$y.'</option>';
							endfor;
						?>
						</select>
						<span>年</span>
						<select name="data[Todo][end_date][month]" id="TodoEndDateMonth">
						<?php
							$selectedMonth = date('n');
							for ($m = 1; $m < 13; $m++) :
								echo '<option value="'.$m.'" '.(($selectedMonth == $m) ? 'selected="selected"' : '').'>'.$m.'</option>';
							endfor;
						?>
						</select>
						<span>月</span>
						<select name="data[Todo][end_date][day]" id="TodoEndDateDay"></select>
						<script>
							// load
							changeDate(jQuery('#TodoEndDateMonth').val());
							// auto load
							function changeDate(month){
								var lengthDate = 30;
								if(month == 1 || month == 3 || month == 5
								   || month == 7 || month == 8
								   || month == 10 || month == 12) {
									lengthDate = 31;
								} else if (month == 2) {
									lengthDate = 28;
									var year = jQuery('#TodoEndDateYear').val();
									if (year == 2012 || year == 2016){
										lengthDate = 29;
									}
								}

								var selectedDay = "<?php echo date('j')?>";
								var innerHtml = "";
								for(var d = 1; d <= lengthDate; d++) {
									innerHtml = innerHtml + '<option value="' + d + '" ' + ((selectedDay == d) ? 'selected="selected"' : '') + '>' + d + '</option>';
								}
								jQuery('#TodoEndDateDay').html(innerHtml);
							}
							jQuery('#TodoEndDateYear').change(function(){
								var year = jQuery('#TodoEndDateYear').val();
								if (jQuery('#TodoEndDateMonth').val() == 2){
									lengthDate = 28;
									if (year == 2012 || year == 2016){
										lengthDate = 29;
									}
									var selectedDay = jQuery('#TodoEndDateDay').val();
									var innerHtml = "";
									for(var d = 1; d <= lengthDate; d++) {
										innerHtml = innerHtml + '<option value="' + d + '" ' + ((selectedDay == d) ? 'selected="selected"' : '') + '>' + d + '</option>';
									}
									jQuery('#TodoEndDateDay').html(innerHtml);
								}
							});

							jQuery('#TodoEndDateMonth').change(function(){
								changeDate(jQuery(this).val());
							});
						</script>
						<span>日</span>
						<input type="hidden" id="datepicker" name="datepicker" value="<?php echo (isset($end_date)) ? $end_date : ''; ?>" />
						<select name="data[Todo][end_date][hour]" id="TodoEndDateHour">
						<?php
							$selectedHour = date('G') ;
							for ($h = 0; $h < 24; $h++) :
								if ($h < 10) :
									echo '<option value="0'.$h.'" '.(($selectedHour == '0'.$h) ? 'selected="selected"' : '').'>0'.$h.'</option>';
								else :
									echo '<option value="'.$h.'" '.(($selectedHour == $h) ? 'selected="selected"' : '').'>'.$h.'</option>';
								endif;

							endfor;
						?>
						</select>
						<span>時</span>
						<select name="data[Todo][end_date][minute]" id="TodoEndDateMin">
						<?php
							$selectedMinute = date('i');
							for ($mi = 0; $mi < 56; $mi++) :
								if ($mi < 10) :
									echo '<option value="0'.$mi.'" '.(($selectedMinute == '0'.$mi) ? 'selected="selected"' : '').'>0'.$mi.'</option>';
								else :
									echo '<option value="'.$mi.'" '.(($selectedMinute == $mi) ? 'selected="selected"' : '').'>'.$mi.'</option>';
								endif;
							endfor;
						?>
						</select>
						<span>分</span>
						</td>
					</tr>
					<tr>
						<td>優先度<span style="color: red">※</span></td>
						<td>
							<?php
								echo $this->Form->input('priority', array(
									   'options' => array('1' => '高', '2' => '中', '3' => '低'),
									   'label'   => false
								));
							?>
						</td>
					</tr>
					<tr>
						<td>内容</td>
						<td>
							<?php echo $this->Form->input('note', array('rows' => '10', 'cols' => '70','error' => false, 'class'=> 'clear','label' => false)); ?>
						</td>
					</tr>
					<tr>
						<td>コメント</td>
						<td>
							 <?php echo $this->Form->input('comment', array( 'size' => 60, 'label' => false,'error' => false)); ?>
						</td>
					</tr>
					<?php if ($this->action == 'edit'): ?>
					<tr>
						<td>完了</td>
						<td>
							 <?php echo $this->Form->checkbox('complete_flag'); ?> 完了
						</td>
					</tr>
					<?php
						else:
							echo $this->Form->hidden('complete_flag', array('value' => 0));
						endif;
					?>
				</table>
			</div>
			<input type="submit" value="新規登録" id="register-2">
		</div>
    <?php echo $this->Form->end(); ?>
</div>

<script>
    $(function() {
        $( "#datepicker" ).datepicker({
            showOn: "button",
            buttonImage: "<?php echo Router::url('/img/calendar.png'); ?>",
            buttonImageOnly: true,
            onClose: function(selectedDate) {
                //jQuery('#TodoEndDateYear').val(date('Y', selectedDate));
                var d = new Date(selectedDate);
                jQuery('#TodoEndDateYear').val(d.getFullYear());
                jQuery('#TodoEndDateMonth').val(d.getMonth() + 1);
                jQuery('#TodoEndDateDay').val(d.getDate());
            }
        });
        jQuery('#TodoTitle').removeAttr('maxlength');
        jQuery('#TodoComment').removeAttr('maxlength');
    });
</script>